<template>
  <!-- 顶部导航栏 -->
  <van-nav-bar :title="topTitle" >
    <div slot="left">
      <van-icon :name="leftIcon"  size="100" @click="leftClick" />
    </div>
    <div slot="right">
      <span class="menu">Menu</span>
      <van-icon :name="rightIcon" color="white" size="30" @click="rightClick" />
    </div>
  </van-nav-bar>
</template>

<script>
export default {
  name: "TopNavBar",
  props: {
    topTitle: {
      type: String,
      default: "",
    },
    leftIcon: {
      type: String,
      default: "",
    },
    rightIcon: {
      type: String,
      default: "",
    },
    leftClick: {
      type:Function,
      default:null
    },
    rightClick: {
      type:Function,
      default:null
    }
  },
};
</script>
<style scoped>
.van-hairline--bottom::after{
  border: none;
}
.menu{
  color: white;
  font-size:large;
  margin-right: 3px;
}
</style>